技术博客INFO
联系我们CONTACT

公司地址：茂名市人民南路新村大院22号101

电话：13592986386

VUE 的一些常用外部组件学习日志您当前的位置：首页 > VUE 的一些常用外部组件学习日志

VUE 的一些常用外部组件学习日志

发布时间：2024/9/5 15:52:50


echarts  采用画图


Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。
Vue 只关注视图层， 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue 学习起来非常简单，本教程基于 Vue 2.1.8 版本测试，Vue3 请参阅 Vue3 教程。
<div id="app">
    <p v-if="seen">现在你看到我了</p>
    <template v-if="ok">
      <h1>菜鸟教程</h1>
      <p>学的不仅是技术，更是梦想！</p>
      <p>哈哈哈，打字辛苦啊！！！</p>
    </template>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    seen: true,
    ok: true
  }
})
</script>






<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>


 GoJS 图形实例
GoJS是一个用于创建交互式可视化图表和图形的JavaScript库。它提供了丰富的功能和工具，使开发人员能够轻松地构建各种类型的图表，包括流程图、组织结构图、网络拓扑图等。GoJS具有灵活的布局和样式设置，可以通过简单的API来实现图表的创建和操作。




vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。
vue的单页面应用是基于路由和组件的，路由用于设定访问路径
router.map({
'/home': { component: Home },
'/about': { component: About }
})




SweetAlert2是一款功能强大的纯Js模态消息对话框插件。SweetAlert2用于替代浏览器默认的弹出对话框，它提供各种参数和方法，支持嵌入图片，背景，HTML标签等，SweetAlert2是SweetAlert-js的升级版本，它解决了SweetAlert-js中不能嵌入HTML标签的问题，并对弹出对话框进行了优化，同时提供对各种表单元素的支持，还增加了5种情景模式的模态对话框，功能非常强大
 Swal('hello world')


swal({
            title: '提示',
            text: "早上好",
            confirmButtonText: '确认',
            confirmButtonColor: 'Green',
        })


 swal({
            title: '确定?',
            text: '您将无法恢复此文件!',
            type: '警告',
            showCancelButton: true,
            confirmButtonText: '确定,删除',
            cancelButtonText: '取消',
        }).then(function(isConfirm) {
            if (isConfirm.value) {
                swal(
                        '已删除!',
                        '文件已删除',
                        'success'
                );
            }
        });